<template>
    <header>
        <el-col :span="21" :push="3">投票后台管理系统</el-col>
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                <img alt="Avatar" src="../../images/avatar2.jpg">
                <p class="manager">{{manager}}<img alt="Avatar" src="../../images/down.png"></p>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">重置密码</el-dropdown-item>
                <el-dropdown-item command="1">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </header>
</template>

<script>
export default {
    data () {
        return { 
            menuShow:false,
            manager:'',
        }
    },
    created(){

    },
    mounted(){
        this.manager = sessionStorage.getItem('manager')?sessionStorage.getItem('manager'):'管理员'
    },
    methods:{
        handleCommand(command){
            console.log(command)
            if(command == '1'){
                this.$router.push("/loginPage");
            }else{
                this.$router.push("/rechargePassword");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    header{
        position: fixed;
        height: 84px;
        display: flex;
        -webkit-display: flex;
        align-items: center;
        -webkit-align-items: center;
        background-color: rgb(32, 160, 255);
        color: #fff;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        font-size: 25px;
        font-weight: 700;
        .manager{
            position: relative;
            padding-right: 30px;
            img{
                position: absolute;
                width: 15px;
                height: auto;
                right: 0;
                top:2px;
            }
        }
    }

    .el-dropdown{
    }

    .el-dropdown-link{
        display: flex;
        -webkit-display: flex;
        align-items: center;
        -webkit-align-items: center;
        cursor: pointer;
        span{
            color: #fff;
        }
        P{
            color: #fff;
        }

        img{
            position: relative;
            margin-right: 10px;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            -webkit-border-radius: 50%; 
        }
    }
</style>
